<template>
  <div>
    <div class="container">
      <div>
         <el-select v-model="value" placeholder="请选择"
         @change="onChange">
          <el-option
          key="0"
          label="0"
          value="0">
          </el-option>
           <el-option
          key="1"
          label="1"
          value="1">
         </el-option>
        </el-select>
      </div>
      <div>
        <el-input v-model="name" placeholder="姓名"></el-input>
      </div>
      <div> 
        <el-input v-model="mobile" placeholder="电话"></el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search"
        @click="onClickSearch">搜索</el-button>
        <el-button type="primary"
        @click="onClickReset">重置<i class="el-icon-upload el-icon--right"></i></el-button>  
      </div>
    </div>
    <div>
      <el-table
      border
      :data="tableData"
      :stripe="true"
      style="width: 100%">
         <el-table-column
         type="selection">
         </el-table-column>
         <el-table-column
         label="学生名称">
           <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width:30px"/>
            <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
           </template>
         </el-table-column>
         <el-table-column
         prop="mobile"
         label="手机号">
         </el-table-column>
         <el-table-column
         prop="zhuangtai"
         label="状态">
         </el-table-column>
         <el-table-column
         prop="date"
         label="时间">
         </el-table-column>
         <el-table-column
         prop="date"
         label="操作">
         </el-table-column>
      </el-table>
    </div>
    <el-pagination
     background
    layout="prev, pager, next"
    :total="19"
    :page-size="5"
    @prev-click="prevClick"
    @next-click="nextClick"
    @current-change="currentChange">
   </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      sourceData:[],
      tableData:[],
      value:"",
      mobile:"",
      name:"",
      current:5
    }
  },
  mounted(){
    axios.get("http://localhost:8080/list.json").then((response)=>{
      window.console.log(response.data)
      // created_at
      response.data.forEach((element)=>{
        var date = new Date(parseInt(element.created_at)*1000);
        // console.log(date);
        element.date=`${date.getFullYear()}年${date.getMonth()+1}月${date.getDay()}日`;
        element.zhuangtai=element.status===0?"禁用":"启用"
      })
      this.sourceData = response.data;
      this.sourceData.forEach((element,index)=>{
        if(index<this.current){
          this.tableData.push(element)
        }
      })
    }).catch(()=>{

    })
  },
  methods:{
    onChange(){
      window.console.log(this.value)
      this.tableData = [];
      this.sourceData.forEach((element)=>{
        if(element.status === parseInt(this.value)){
          this.tableData.push(element)
        }
      })
    },
    onClickReset(){
      this.tableData = this.sourceData
      this.value = ""
      this.name = ""
      this.mobile=""
    },
    onClickSearch(){
      this.tableData = [];
      if(this.name.length!=0){
        
        this.sourceData.forEach((element)=>{
          
        if(element.nickname === this.name){
          window.console.log(this.name)
          this.tableData.push(element)
        }
      })
      }

      if(this.mobile.length!=0){
        this.sourceData.forEach((element)=>{
        if(element.mobile === this.mobile){
          this.tableData.push(element)
        }
      })
      }
    },
    nextClick(){
      
    },
    prevClick(){

    },
    currentChange(page){
      window.console.log(page)
      var maxRange =  this.current*page
      var minRange = this.current*(page-1)
      this.tableData = [];
      this.sourceData.forEach((element,index)=>{
        if(index<=maxRange&&index>minRange){
          this.tableData.push(element)
        }
      })
    }
  }
}
</script>

<style scoped>
.container
{
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
</style>